<template>
  <div>
    <el-form size="mini" :inline="true">
      <el-form-item label="手动报名">
        <el-select
          v-model="value"
          :clearable="true"
          filterable
          remote
          reserve-keyword
          placeholder="请输入真实姓名查询"
          :remote-method="remoteMethod"
          :loading="loading"
        >
          <el-option
            v-for="item in options"
            :key="item.userId"
            :label="item.name"
            :value="item.userId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="confirmApply">确认报名</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="sysUser.name" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="sysUser.mobile" label="性别" width="100">
        <template slot-scope="{ row }">
          {{ row.sysUser.userCard | idcard2sex }}
        </template>
      </el-table-column>
      <el-table-column prop="sysUser.userCard" label="身份证号" width="240">
      </el-table-column>
      <el-table-column prop="sysUser.mobile" label="手机号" width="180">
      </el-table-column>

      <el-table-column prop="sysUser.mobile" label="状态" width="100">
        <template slot-scope="{ row }">
          {{ row.peStatus != "1" ? "已录用" : "未录用" }}
        </template>
      </el-table-column>
      <!-- peStatus=='1' -->
    </el-table>
    <!-- <div class="signLogFooter">
      <el-button type="primary" @click="exportExcel" :loading="exportLoading">导出Excel</el-button>
    </div> -->
  </div>
</template>

<script>
import { get_apply_list_api } from "@/api/applyDetail";
import dateformat from "dateformat";
import idcard from "idcard";
import { user_list_api } from "@/api/auth.js";
import axios from "../../axios/index";
export default {
  data() {
    return {
      jobID: "",
      tableData: [],
      exportLoading: false,
      options: [],
      value: "",
      loading: false,
      row: "",
    };
  },
  filters: {
    idcard2sex(val) {
      let info = idcard.info(val);

      let sex = info.gender === "M" ? "男" : "女";
      return sex;
    },
  },
  methods: {
    confirmApply() {
      let wuid = this.value;
      let pid = this.row.pId;
      if (!pid) {
        this.$message.error("缺少pid，请重新刷新页面再次查看报名列表");
      }
      if (!wuid) {
        this.$message.error("缺少wuid，请先搜索并选择要手动报名的人");
      }

      axios
        .post("/back/positionEnter/sysEnter", {
          wuId: wuid,
          pId: pid,
        })
        .then((res) => {
          if (res.code == 20002) {
            this.$message.success("报名成功");
            this.__getList();
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;

        user_list_api({
          current: 1,
          name: query,
          pageSize: 10,
          status: "1",
          userRole: "0",
        }).then((res) => {
          this.loading = false;
          console.log(res);
          this.options = res.data.records;
        });
      } else {
        this.options = [];
      }
    },
    __init(row) {
      this.row = row;
      this.__getList();
    },
    __getList() {
      get_apply_list_api({
        pid: this.row.pId,
        // pid: "49cd20c5fa184fe89684ee5d3ac08851",
      }).then((res) => {
        this.tableData = res.data.records;
        console.log(this.tableData);
      });
    },
    exportExcel() {
      this.exportLoading = true;
      export_sign_log_list_api({
        pid: this.row.pId,
      }).then((res) => {
        console.log(res);
        setTimeout(() => {
          this.exportLoading = false;
        }, 5000);
        let url = window.URL.createObjectURL(res); // 将二进制文件转化为可访问的url
        var a = document.createElement("a");
        document.body.appendChild(a);
        a.href = url;
        a.download = `${this.row.pTitle}-${dateformat(
          this.row.pDate,
          "yyyy-MM-dd"
        )}-打卡记录.xlsx`;
        a.click(); // 模拟点击下载
        window.URL.revokeObjectURL(url);
      });
    },
  },
};
</script>

<style>
.signLogFooter {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-top: 30px;
}
</style>
